import { Button } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useMedicineData } from "../../hooks/medicine";
import { get, post } from "../../utils/request";
import "./css/medicine.scss";
function medicine() {
  const navigate = useNavigate();
  let { banners, categories } = useMedicineData();
  const [banners2, setB2] = useState([]); // 展示
  const [name, setName] = useState("");

  useEffect(() => {
    setB2(banners);
  }, [banners]);
  useEffect(() => {
    if (name) {
      setB2(banners.filter((item: any) => item.name.includes(name)));
    } else {
      setB2(banners);
    }
  }, [name]);
  return (
    <div>
      <p
        onClick={() => {
          navigate(-1);
        }}
        style={{ cursor: "pointer" }}
      >
        &lt;&lt;返回
      </p>
      <input
        type="text"
        onBlur={(e) => {
          setName(e.currentTarget.value);
          // console.log(name);
        }}
        placeholder="搜素药品"
        className="input"
      />
      <ul className="category">
        {categories.map((item: any) => (
          <li key={item.id}>{item.name}</li>
        ))}
        <li></li>
      </ul>
      <ul>
        {banners2.map((item: any) => (
          <li className="doctorLi" key={item.id}>
            <p>药名:{item.name}</p>
            <p>主治：{item.category.name}</p>
            <p>价格：{item.price}</p>
            <img src={item.image} alt="" />
            <Button
              block
              onClick={() => {
                console.log(typeof item.name);

                post("/members/shop_carts", {
                  amount: 1,
                  medicine: item.name,
                  price: 1,
                }).then((res) => {
                  console.log(res);
                });
              }}
              style={{ width: "60vw", margin: "auto" }}
              color="danger"
              size="large"
            >
              加入购物车
            </Button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default medicine;
